<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>待收款</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            outline:none;
        }

    </style>
</head>

<body style="background: #fff;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">{{api.pageParam.status == 1 ? '待收款' : '待确认'}}</span>
</div>
<div id="app" style="padding-top: 55px;"  v-cloak>
    <div class="sell-content obligation invoiving-big">
        <div class="sell-content-top">
            <div class="details">
                <div>
                  <img class="sell-top-img" v-src="'../../image/arrow.png'"/>
                  <span style="vertical-align: middle;display: inline-block;">预计获得 CNY</span>
                </div>
                <div style="margin-left: 10%;">
                  <img class="sell-top-img" v-src="'../../image/arrow-2.png'"/>
                  <span style="vertical-align: middle;display: inline-block;">委托中 QHR(含手续费)</span>
                </div>
            </div>
            <div class="details-bottom">
                <div>{{receivable_con.totalPrice}}</div>
                <div>{{receivable_con.tradeNum}}</div>
            </div>
        </div>
        <div class="pay-time">
            <div class="surplus-time">{{receivable_con.orderTradeStatus == 1 ? '剩余交易时间' : '自动确认时间'}}</div>
            <!-- {{pendingpayment_order_con.buyOvertime}} -->
            <div id="ordercancel" class="surplus-time-con"></div>
        </div>
        <div class="pay-tips" v-show="status == 1">
            <span style="color: #F95656">未在规定时间内付款，且未上传真实付款凭证点击确定的用户</span>，会 被系统精确标记,如果<span style="color: #F95656">标记2次</span>，系统将自动赠送特殊buff，
            <span style="color: #F95656"> 24小时内禁止进行交易，恶意上传虚假图片一经发现封号处理</span>。
        </div>
        <div class="pay-tips" v-show="status == 2">
            请前往已绑定的支付宝，确认<span style="color: #F95656">是/否</span>
            收款，核对TA上传的付款凭证
            是否属实，如有疑问可联系TA或问题申诉冻结订单反馈。倒计时
            结束后，我们将自动确认。
        </div>
        <div class="pur-content voucher">
            <div class="tran-content">
                <div class="seller-number-title tips-pay" style="margin-bottom: 20px">
                    <div class="tips-pay-left">
                        <p class="seller-letter">
                            {{hide_name_two(receivable_con.buyNickname)}}
                        </p>
                        <p class="seller-name">{{hide_name(receivable_con.buyNickname)}}</p>
                    </div>
                    <div class="tips-pay-left-right">
                        推送提醒支付
                    </div>
                </div>
                <div class="detail-title">
                    <div class="unit-price-color">单价</div>
                    <div>{{receivable_con.tradePrice}} CNY</div>
                </div>
                <div class="detail-title">
                    <div class="unit-price-color">手续费</div>
                    <div>{{receivable_con.serviceCharge}}%QHR</div>
                </div>
                <div class="detail-title">
                    <div class="unit-price-color">锁定时间</div>
                    <div>{{receivable_con.createTime}}</div>
                </div>
                <div class="detail-title" v-show="status == 2">
                    <div class="unit-price-color">付款时间</div>
                    <div>{{receivable_con.payTime}}</div>
                </div>
                <div class="detail-title">
                    <div class="unit-price-color">订单号</div>
                    <div>{{receivable_con.orderNo}}</div>
                </div>
            </div>
            <div class="pic-alipay" style="height:120px;line-height:120px;" v-show="status == 1">
                对方还未上传付款凭证
            </div>
            <div class="pic-alipay pic-alipay-two" v-if="status == 2">
              <img :src="receivable_con.pictureAds" style="width:100%;object-fit: cover;vertical-align: middle">
            </div>
            <div class="confirm-money" style="margin-bottom:20px;" v-if="status == 2">
              <!-- v-open-win="{orderNo:receivable_con.orderNo}" vurl="problemappeal" -->
                <div class="confirm-money-left" v-open-win="{orderNo:receivable_con.orderNo}" vurl="problemappeal" >问题申诉</div>
                <div class="confirm-money-right" v-myclick='[receivable_con.orderNo, confirm]'>确认已收款</div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
    var vm,
        wx,
        receivable_details,
        receivable_con,
        confirm_con,
        confirm_w,
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        var details={
          agtVer:1,
          clientVer:1,
          ctime:201911071802959,
          cctime:201911071802959,
          sign:"abcdefg",
          token:getPrefs('token'),
          orderNo:api.pageParam.orderid,
        }
        var base = new Base64();
        var	item=base.encode(JSON.stringify(details))
        var data = {
            jsonData:item,
        };
        var callback=function(ret){
          var base = new Base64();
          var receivable_details = base.decode(ret.content.jsonData);
              receivable_details =JSON.parse( receivable_details);
              receivable_con = receivable_details.coOrder;
              console.log(JSON.stringify(receivable_details));
              initApp();
        }
        pinet.post(APIURLP+'/play/od/getReceivableInfoData',data, callback);
        api.parseTapmode();
        addListeners();

    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
              confirm_con:confirm_con,
              confirm_w:confirm_w,
              receivable_details:receivable_details,
              receivable_con:receivable_con,
              status:api.pageParam.status,
            },
            computed: {
            },
            mounted:function(){
              TimeDown('ordercancel');
            },
            methods: {
            
              hide_name_two:function(name){
                return new Array(name.length).join('') + name.substr(-1);
              },
              hide_name:function(name){
                return new Array(name.length).join('*') + name.substr(-1);
              },
              reload_info:function(){
                var details={
                  agtVer:1,
                  clientVer:1,
                  ctime:201911071802959,
                  cctime:201911071802959,
                  sign:"abcdefg",
                  token:getPrefs('token'),
                  orderNo:api.pageParam.orderid,
                }
                var base = new Base64();
                var	item=base.encode(JSON.stringify(details))
                var data = {
                    jsonData:item,
                };
                var callback=function(ret){
                  var base = new Base64();
                  var receivable_details = base.decode(ret.content.jsonData);
                      vm.receivable_details =JSON.parse( receivable_details);
                      vm.receivable_con = vm.receivable_details.coOrder;
                }
                pinet.post(APIURLP+'/play/od/getReceivableInfoData',data, callback);
              },
              confirm:function(value){
                var details={
                  "agtVer":1,
                  "clientVer":1,
                  ctime:201911071802959,
                  cctime:201911071802959,
                  sign:"abcdefg",
                  token:getPrefs('token'),
                  orderNo:value,
                }
                var base = new Base64();
                var	item=base.encode(JSON.stringify(details))
                var data = {
                    jsonData:item,
                };
                var callback=function(ret){
                  var base = new Base64();
                  var confirm_con = base.decode(ret.content.jsonData);
                    vm.confirm_con =JSON.parse( confirm_con);
                    vm.confirm_w = confirm_con.coOrder;
                    console.log(JSON.stringify(vm.confirm_w));
                    api.toast({
                        msg: '确认成功',
                        duration: 2000,
                        location: 'middle'
                    });
                    closeWin();

                }
                pinet.post(APIURLP+'/play/td/confirmRpt',data, callback);
              },
            },
            watch: {

            },
        })
    }
    function addListeners() {
      api.addEventListener({
          name: 'viewdisappear'
      }, function () {
      });
      api.addEventListener({
          name: 'keyback'
      }, function () {
          console.log('ddddd');
          api.closeWin();
      });
    }


    function TimeDown(id) {
     //结束时间
     // var endDate = new Date(endDateStr);
    //  var endDate = new Date(new Date().setHours(0, 0, 0, 0)) / 1000+24*60*60;

        var date = new Date(this.receivable_con.tradeCreateTime);
        var time = date.getTime()/1000;
        var order_state = this.receivable_con.orderTradeStatus;
       var endDate = parseInt(time)+60*(order_state==1?30:60);
       //当前时间
       var nowDate = (new Date())/1000;
       if(endDate==nowDate){
         vm.reload_info();
       }
     //相差的总秒数
     var totalSeconds = parseInt(endDate - nowDate);
     //天数
     var days = Math.floor(totalSeconds / (60 * 60 * 24));
     //取模（余数）
     var modulo = totalSeconds % (60 * 60 * 24);
     //小时数
     var hours = Math.floor(modulo / (60 * 60));
     modulo = modulo % (60 * 60);
     //分钟
     var minutes = Math.floor(modulo / 60);
     //秒
     var seconds = modulo % 60;
     //输出到页面
     document.getElementById(id).innerHTML = minutes + ":" + seconds;
     // var time_str = hours+':'+minutes+':'+seconds;
     // vm.time_str = time_str;
     //延迟一秒执行自己
     setTimeout(function () {
         TimeDown(id);
     }, 1000)
 }
</script>

</html>
